<template>
  <div>
    
    <el-card :bordered="false" shadow="never" class="ivu-mt mt16">
		
		
     <el-button v-auth="['admin-user-level_add']" type="primary" v-db-click @click="add"
      >添加活动</el-button>
      <el-table
        :data="levelLists"
        ref="table"
        class="mt14"
        v-loading="loading"
        highlight-current-row
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column label="ID" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
       
     
        <el-table-column label="激活主科数量" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.major_number }}</span>
          </template>
        </el-table-column>
        <el-table-column label="赠送副科数量" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.minor_number }}</span>
          </template>
        </el-table-column>
		
		<el-table-column label="赠送类型" min-width="100">
		  <template slot-scope="scope">
		    <span v-if="scope.row.gift_type == 1">全部</span>
		    <span v-if="scope.row.gift_type == 2">只赠送主科</span>
		    <span v-if="scope.row.gift_type == 3">只赠送副科</span>
		  </template>
		</el-table-column>
		
        <el-table-column label="活动状态" min-width="100">
          <template slot-scope="scope">
  
			<el-switch
			  v-model="scope.row.status"
			  @change="checkSwitch($event,scope.row.id)"
			  active-color="#13ce66"
			  inactive-color="#ff4949">
			</el-switch>
          </template>
        </el-table-column>
		<el-table-column label="活动状态" min-width="100">
		  <template slot-scope="scope">
			<span v-if="scope.row.status">正常</span>
			<span v-else>关闭</span>
		  </template>
		</el-table-column>
		<el-table-column label="添加时间" min-width="100">
		  <template slot-scope="scope">
		    <span>{{ scope.row.add_time }}</span>
		  </template>
		</el-table-column>
        
	
        <el-table-column fixed="right" label="操作" width="130">
          <template slot-scope="scope">
			   <a  @click="editActive(scope.row)">编辑</a> 
			 <!-- <a  v-if="roles == '777'" @click="deleteActive(scope.row,scope.$index)">删除</a> -->
			 <el-divider direction="vertical" ></el-divider>
			 <a   @click="deleteActive(scope.row,scope.$index)">删除</a> 
			  <!-- <a v-if="scope.row.apply_status == 0 && roles == '777'" @click="applay(scope.row)">审核</a> 
			   <el-divider direction="vertical" v-if="scope.row.apply_status == 0 && roles == '777'"></el-divider>
            <el-dropdown size="small" @command="changeMenu(scope.row, $event, scope.$index)" :transfer="true">
              <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i> </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="3">详情</el-dropdown-item>
                <el-dropdown-item command="2" v-if="roles == '777'">删除</el-dropdown-item>
              </el-dropdown-menu> -->
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination
          v-if="total"
          :total="total"
          :page.sync="levelFrom.page"
          :limit.sync="levelFrom.limit"
          @pagination="getList"
        />
      </div>
    </el-card>
    <!-- 等级任务-->
    <task-list ref="tasks"></task-list>
	
	
	
	
	
	<el-dialog
	  title="详情"
	  :visible.sync="dialogVisibleTwo"
	  width="40%"
	  >
	  
	  <div>
		  
		  <div v-if="now_item.applyfor_type == 1 || now_item.applyfor_type == 2" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">选择的所有主科：</div>
			  <div>
				<div v-for="item in now_item.zhuke_list">
					科目:{{item.subject_name}}  ---  所属卡密({{item.carmine_text}})
				</div>
			  </div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1 || now_item.applyfor_type == 2" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">选择的所有副科：</div>
			  <div>
				<div v-for="item in now_item.fu_list">
					科目:{{item.subject_name}}  ---  所属卡密({{item.carmine_text}})
				</div>
			  </div>	  
		  </div>
		  
		  
		  <div style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">申请类型：</div>
			  <div>{{now_item.applyfor_type_details}}</div>	  
		  </div>
		  
		  
		  <div v-if="now_item.applyfor_type == 1 || now_item.applyfor_type == 3" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">所属班级：</div>
			  <div>{{now_item.class_text}}</div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">年龄：</div>
			  <div>{{now_item.age}}</div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">所属区域：</div>
			  <div>{{now_item.agent_province}}-{{now_item.agent_city}}-{{now_item.agent_district}}-{{now_item.detailed_address}}</div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">备注：</div>
			  <div>{{now_item.mark}}</div>	  
		  </div>

	
	  </div>
	  
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisibleTwo = false">关 闭</el-button>
	  </span>
	</el-dialog>
	
	
	
	
	
	
	
	
	<el-dialog
	  title="活动"
	  :visible.sync="dialogVisible"
	  width="40%"
	  :before-close="handleClose">
	  
	  <div>
		  
		  
		  <div style="display: flex;">
			  <div style="margin-top: 5px;">激活主科次数:</div>
			  <div style="margin-left: 10px;"><el-input v-model="major_number" placeholder="请输入内容" style="width: 250px;"></el-input></div>
		  </div>
		 <div style="display: flex;margin-top: 20px;">
			  <div style="margin-top: 5px;">赠送副科次数:</div>
			  <div style="margin-left: 10px;"><el-input v-model="minor_number" placeholder="请输入内容" style="width: 250px;"></el-input></div>
		 </div>
		  
		  <div style="display: flex;margin-top: 20px;">  
			  <div> 活动状态:</div>
			  <div style="margin-left: 30px;margin-top: 1px;">
				<el-radio-group v-model="status">
				  <el-radio :label="1">开启</el-radio>
				  <el-radio :label="2">关闭</el-radio>
				</el-radio-group>
			  </div>	  
		  </div>
		  
		  <div style="display: flex;margin-top: 20px;">
			  <div>赠送科目类型:</div>
			  <div style="margin-left: 30px;margin-top: 1px;">
				<el-radio-group v-model="gift_type">
				  <el-radio :label="1">全部</el-radio>
				  <el-radio :label="2">只赠送主课</el-radio>
				  <el-radio :label="3">只赠送副课</el-radio>
				</el-radio-group>
			  </div>	  
		  </div>
 
	  </div>
	  
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="toexamine">确 定</el-button>
	  </span>
	</el-dialog>
	
	
	

	
	
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { activitylist, setShowApi, createApi ,editactivity,editactivitystatus} from '@/api/user';

export default {
  name: 'user_label',

  data() {
    return {
		
		dialogVisibleTwo: false, 
	  
		 dialogVisible: false, 
		 
		 
		 status_text:0,
		 status_id:0,
		 
		status:1,  //活动状态
		major_number:'', //激活主科次数
		gift_type:1, //赠送类型
		minor_number:'',  //赠送副科次数
		now_id:0,  //要编辑的id
		
		
		
		account_end_time:'',  //到期时间
		
		now_item:{},
		roles:'',
		
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      levelFrom: {
        apply_status: '',
		apply_type:'',
        real_name: '',
        page: 1,
        limit: 15,
		account:'',
      },
      levelLists: [],
      total: 0,
      FromData: null,
      imgName: '',
      visible: false,
      levelId: 0,
      modalTitleSs: '',
      titleType: 'level',
      modelTask: false,
      num: 0,
    };
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : '80px';
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  methods: {
    ...mapMutations('userLevel', ['getlevelId']),
	
	//审核状态
	checkSwitch(e,id){
		console.log('777777777777777');
		console.log(e);
		console.log(id);
		console.log('777777777777777');
		
		this.status_id = id

		
		if(e){
			console.log('1');
			var status_text = 1
		}else{
			console.log('2');
			var status_text = 2
		}
		
		
		editactivitystatus({
			id:id,
			status:status_text
		})
		  .then(async (res) => {
		    this.$message.success(res.msg);
			this.getList();
		  })
		  .catch((res) => {
		    this.$message.error(res.msg);
		  });
		
	},
	
	//审核
	toexamine(){
	
		var that = this
		editactivity({
			status:that.status,
			major_number:that.major_number,
			gift_type:that.gift_type,
			minor_number:that.minor_number,
			now_id:that.now_id
		})
		  .then(async (res) => {
			  that.$message.success(res.msg);
			  that.dialogVisible = false
			  this.getList();
		    // let data = res.data;
		    // this.groupLists = data.list;
		    // this.total = data.count;
		    // this.loading = false;
		  })
		  .catch((res) => {
		    this.loading = false;
		    this.$message.error(res.msg);
		  });
	},  
	
	applay(row){
		this.apply_status = 1;
		this.refuse_text = '';
		this.examine_id = row.id;
		this.account_end_time = '';	  
		this.dialogVisible = true;
		this.now_item =  row
	},
	
    // 操作
    changeMenu(row, name, num) {
      this.levelId = row.id;
      switch (name) {
        case '1':
          this.getlevelId(this.levelId);
          this.$refs.tasks.modals = true;
          this.$refs.tasks.getList();
          break;
        case '3':

		  this.dialogVisibleTwo = true;
		  this.now_item =  row
		  
          break;
        default:
          this.del(row, '删除等级', num);
      }
    },
	
	deleteActive(row,num){
		this.del(row, '删除', num);
	},
	
    // 删除
    del(row, tit, num) {
      let delfromData = {
        title: tit,
        num: num,
        url: `user/deleteactivitys/${row.id}`,
        method: 'put',
        ids: '',
      };
      this.$modalSure(delfromData)
        .then((res) => {
          this.$message.success(res.msg);
          this.levelLists.splice(num, 1);
          this.total--;
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    // 删除成功
    // submitModel () {
    //     this.levelLists.splice(this.delfromData.num, 1)
    // },
    // 修改是否显示
    onchangeIsShow(row) {
      let data = {
        id: row.id,
        is_show: row.is_show,
      };
      setShowApi(data)
        .then(async (res) => {
          this.$message.success(res.msg);
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    // 等级列表
    getList() {
      this.loading = true;
      this.levelFrom.is_show = this.levelFrom.is_show || '';
      activitylist({})
        .then(async (res) => {
          let data = res.data;
          this.levelLists = data.list;

          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
	
	editActive(row){
		this.status = row.status_text;
		this.major_number = row.major_number;
		this.gift_type = row.gift_type;
		this.minor_number = row.minor_number;
		this.now_id = row.id;
		this.dialogVisible = true;
	},
	
    // 添加
    add() {
	

		this.status = 1;
		this.major_number = '';
		this.gift_type = 1;
		this.minor_number = '';
		this.now_id = 0;
		
		this.dialogVisible = true;
      // this.levelId = 0;
      // this.$modalForm(createApi({ id: this.levelId })).then(() => this.getList());
    },
    // 编辑
    edit(row) {
      this.levelId = row.id;
      this.$modalForm(createApi({ id: this.levelId })).then(() => this.getList());
      this.getlevelId(this.levelId);
    },
    // 表格搜索
    userSearchs() {
      this.levelFrom.page = 1;
      this.getList();
    },
    // 修改成功
    submitFail() {
      this.getList();
    },
  },
};
</script>

<style scoped lang="stylus">
.tabBox_img
    width 36px
    height 36px
    border-radius:4px
    cursor pointer
    img
        width 100%
        height 100%
</style>
